<template>
	<view class="content">
		<div class="mainT">
			<image src="../../static/images/img1.jpg" mode="widthFix" class="bg"></image>
			<div class="avatar">
				<image src="../../static/images/icon1.png" mode=""></image>
			</div>
			<div class="box">
				<div class="t">
					<div class="l">
						<h3>付款金额</h3>
						<p><span>¥</span>{{dataJson.amount}}</p>
					</div>
					<div class="r">
						<p v-for="(item,index) in day" :key="index" @click="getInfo(index)"
							:class="dayIndex==index?'active':''">{{item}}</p>
					</div>
				</div>
				<div class="list">
					<div class="items">
						<h3>访客数</h3>
						<p>{{dataJson.user_num}}</p>
					</div>
					<div class="items">
						<h3>付款买家</h3>
						<p>{{dataJson.pay_user_num}}</p>
					</div>
					<div class="items">
						<h3>付款订单</h3>
						<p>{{dataJson.pay_order_num}}</p>
					</div>
				</div>
			</div>
		</div>
		<div class="tooList">

			<div class="items" @click="toLink(1)" v-if="userInfo.role*1<=3">
				<image src="/static/icon/icon3.png" mode="heightFix"></image>
				<p>产品管理</p>
			</div>
			<div class="items" @click="toLink(2)">
				<image src="/static/icon/icon5.png" mode="heightFix"></image>
				<p>订单管理</p>
			</div>
			<div class="items" @click="toLink(3)" v-if="userInfo.role*1<=3">
				<image src="/static/icon/icon1.png" mode="heightFix"></image>
				<p>仓库管理</p>
			</div>
			<div class="items" @click="toLink(4)" v-if="userInfo.role*1<=2">
				<image src="/static/icon/icon9.png" mode="heightFix"></image>
				<p>佣金设置</p>
			</div>
			<div class="items" v-if="userInfo.role*1<=2">
				<image src="/static/icon/icon6.png" mode="heightFix"></image>
				<p>分销管理</p>
			</div>
			<!-- <div class="items">
				<image src="/static/icon/icon11.png" mode="heightFix"></image>
				<p>审批管理</p>
			</div> -->
			<div class="items" @click="toLink(5)" v-if="userInfo.role*1<=2">
				<image src="/static/icon/icon16.png" mode="heightFix"></image>
				<p>公告信息</p>
			</div>
			<div class="items" @click="toLink(6)">
				<image src="/static/icon/icon14.png" mode="heightFix"></image>
				<p>热点查看</p>
			</div>
		</div>
		<div class="toList">
			<div class="items">
				<image src="../../static/icon/icon15.png" mode=""></image> 推广商城
			</div>
			<!-- <div class="items">
				<image src="../../static/icon/icon15.png" mode=""></image> 更多功能
			</div> -->
		</div>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				dataJson: null,
				dayIndex: 0,
				day: ['今天', '昨天', '7天', '30天'],
				title: 'Hello',
				userInfo:{},
			}
		},
		onLoad() {
			
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo')
			}else{
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
			this.getInfo(0);
			uni.$on('userLoginSuccess', () => {
			      				this.userInfo = uni.getStorageSync('userInfo');
								this.getInfo(0);
								uni.showToast({
									title: "自动重新登录成功",
									icon: 'none',
									duration: 2000
								});
			    })
		},
		methods: {
		 refreshData() {
			  // 刷新数据逻辑
			  this.fetchData()
			},
			getInfo(index) {
				this.dayIndex = index
			
				request({
					url: 'index/index',
					method: 'get',
					data: {
						type: index
					}
				}).then(res => {
					if (res.status == 200) {
						this.dataJson = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: 'none',
						duration: 2000
					});
				})
			},

			toLink(num) {
				switch (num) {
					case 1:
						uni.switchTab({
							url: '/pages/product/product'
						});
						break;
					case 2:
						uni.switchTab({
							url: '/pages/orderList/orderList'
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/cart/cart'
						});
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/yjsz/yjsz'
						});
						break;
					case 5:
						uni.navigateTo({
							url: '/pages/news/news'
						});
						break;
						case 6:
							uni.navigateTo({
								url: '/pages/hot/hot'
							});
							break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
	}

	.mainT {
		height: 550rpx;
		position: relative;
		padding: 0 25rpx;
		padding-top: 45rpx;

		.bg {
			position: absolute;
			z-index: -1;
			display: block;
			width: 100%;
			left: 0;
			top: 0;
		}

		.avatar {
			width: 112rpx;
			height: 112rpx;
			border-radius: 100%;
			overflow: hidden;
			margin-bottom: 36rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.box {
			background-color: #fff;
			height: 374rpx;
			padding: 0 42rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			padding-right: 14rpx;
			padding-top: 26rpx;

			.list {
				display: flex;
				justify-content: space-between;
				margin-top: 58rpx;
				padding-right: 60rpx;

				h3 {
					color: #1a1a1a;
					font-size: 29rpx;
				}

				p {
					color: #16b9c6;
					font-size: 50rpx;
				}
			}

			.t {
				display: flex;
				justify-content: space-between;

				h3 {
					height: 78rpx;
					line-height: 78rpx;
					color: #1a1a1a;
					font-size: 29rpx;
				}

				.l {
					p {
						display: flex;
						line-height: .8;
						align-items: flex-end;
						color: #16b9c6;
						font-size: 50rpx;
						margin-top: 15rpx;

						span {
							font-size: 30rpx;
						}
					}
				}

				.r {
					height: 80rpx;
					display: flex;
					align-items: center;
					background-color: #f7f7f7;
					padding: 0 10rpx;
					border-radius: 10rpx;

					p {
						width: 82rpx;
						height: 56rpx;
						text-align: center;
						line-height: 56rpx;
						color: #535353;
						font-size: 29rpx;
						border-radius: 10rpx;

						&.active {
							color: #16b9c6;
							background-color: #fff;
						}
					}
				}
			}
		}
	}

	.tooList {
		width: 100%;
		background-color: #fff;
		width: 700rpx;
		box-sizing: border-box;
		margin: 0 auto;
		border-radius: 20rpx;
		display: flex;
		padding: 20rpx 0;
		flex-wrap: wrap;

		.items {
			width: 25%;
			text-align: center;
			padding: 20rpx 0;

			p {
				color: #1a1a1a;
				font-size: 29rpx;
				margin-top: 10rpx;
			}
		}

		image {
			height: 50rpx;
		}
	}

	.toList {
		width: 700rpx;
		margin: 0 auto;
		margin-top: 30rpx;

		.items {
			height: 94rpx;
			background-color: #fff;
			padding: 0 26rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			color: #1a1a1a;
			font-size: 29rpx;
			margin-bottom: 2rpx;

			image {
				width: 66rpx;
				height: 66rpx;
				margin-right: 28rpx;
			}
		}
	}
</style>